<template>
  <div class="attention col-lg-11 ml-2 px-0 mb-2">
    <div class="cart bg-white">
      <div class="cart-body">
        <div class="cart-title row p-4">
          <div class="col-lg-5 px-3">
            <div class="row">
              <div class="col-lg-3 _la p-0">
                <img :src="item.avatar" class="rounded-circle" alt="" />
              </div>
              <div class="col-lg-9 pl-4 text-12 _lb">
                <p class="font-weight-bold">{{item.nickname}}</p>
                <p class="color-h mb-2">{{item.position}}</p>
                <p>
                  创作<span class="font-weight-bold px-1">{{item.popularity}}</span
                  >|&nbsp;粉丝<span class="font-weight-bold ml-1">{{item.fans}}</span>
                </p>
                <p class="color-h mb-2">啧啧啧</p>
                <a
                  class="btn btn-warning btn-sm mr-2 px-4"
                  v-show="item.gzstate"
                  @click="add"
                  role="button"
                  >关注</a
                >
                <a
                  class="sendw btn btn-default btn-outline-secondary btn-sm px-4 text-dark mr-2"
                  v-show="!item.gzstate"
                  @click="del"
                  role="button"
                  >已关注</a
                >
                <a
                  type="button"
                  data-toggle="modal"
                  data-target="#exampleModal"
                  class="sendw btn btn-default btn-outline-secondary btn-sm px-4"
                  >私信</a
                >
              </div>
            </div>
          </div>
          <div class="col-lg-7 pl-4">
            <div class="row _r h-100">
              <div class="col-lg-5 offset-lg-5 px-0 _ra">
                <img :src="item.image==null?require('../../assets/Index/img/null-page.png'):item.image" class="w-100 h-100 pr-1" alt="" />
              </div>
              
              <div
                class="col-lg-1 px-0 _rb pl-2 d-flex justify-content-center align-items-center"
              >
                <router-link to="/personal">
                  <ul class="w-100 h-100">
                    <li class="rounded-circle mb-2 bg-warning"></li>
                    <li class="rounded-circle mb-2 bg-warning"></li>
                    <li class="rounded-circle mb-2 bg-warning"></li>
                  </ul>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 私信弹框 -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" style="max-width: 384px">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">写私信</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <span class="text-12 tag btn btn-sm btn-block">Small button</span>
            </div>
            <div class="form-group position-relative">
              <textarea
                rows="6"
                class="form-control"
                maxlength="100"
                id="message-text"
              ></textarea>
              <span class="textlength text-12 color-h position-absolute"
                >200</span
              >
            </div>
            <div class="form-group">
              <a
                id="dropdownMenuButton"
                type="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                class="text-12"
                ><svg
                  class="icon mr-2"
                  width="18px"
                  height="18.00px"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    fill="#f4ea2a"
                    d="M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229.2 512-512S794.8 0 512 0z m0 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448zM320 405.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0ZM704 405.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0ZM512 810.7c117.8 0 213.3-95.5 213.3-213.3H298.7c0 117.8 95.5 213.3 213.3 213.3z"
                  />
                </svg>
                添加表情</a
              >
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                12
              </div>
            </div>
          </div>
          <div class="modal-footer justify-content-lg-center">
            <a type="button" class="btn btn-warning btn-sm mr-2 px-4" href="#"
              >确定</a
            >
            <a
              type="button"
              data-toggle="modal"
              data-target="#exampleModal"
              data-whatever="@getbootstrap"
              class="sendw btn btn-default btn-outline-secondary btn-sm px-4"
              href="#"
              role="button"
              >取消</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{"item":{default:[]}},
  data() {
    return {
      // 关注按钮
      // 当前登录者id
      userId:70,
    };
  },
  mounted(){
  },
  methods:{
   del(){
     
     this.$emit("del",{userId:this.userId,likeId:this.item.id})
    },
    add(){
     this.$emit("add",{userId:this.userId,likeId:this.item.id})
      
    }
  },
  
};
</script>

<style lang="less">
.attention {
  // 评论样式
  textarea {
    resize: none !important;
  }
  .textlength {
    bottom: 2px;
    right: 27px;
  }
  .form-control {
    box-shadow: none !important;
  }
  .tag {
    background-color: #eeeeee !important;
  }
  .modal-footer {
    border-top: 0px !important;
  }
  //
  ._la {
    img {
      width: 70px;
      height: 70px;
    }
  }
  ._r {
    ._ra {
      height: 100%;
    }
    ._rb {
      ul {
        li {
          width: 4px;
          height: 4px;
        }
      }
    }
  }
  @media (min-width: 576px){
.modal-dialog {
    margin: 0px auto;
}}
}
</style>